<template>
    <div>
        <Row>
        <Col :lg="18">
            <div class="tempAdd">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="文章标题" prop="title">
                        <Input v-model="formValidate.title"></Input>
                    </FormItem>
                    <FormItem label="简略标题" prop="abstrTitle">
                        <Input v-model="formValidate.abstrTitle"></Input>
                    </FormItem>
                    <FormItem label="内容摘要" prop="abstr">
                        <Input v-model="formValidate.abstr" type="textarea" :autosize="{minRows: 4,maxRows: 10}" placeholder="Enter something..."></Input>
                    </FormItem>
                    <FormItem label="详细内容" prop="desc">
                        <UE :config=config ref="ueditor"></UE>
                    </FormItem>

                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </div>
        </col>
        <Col :lg="6">
              <div class="tempAdd">
                  <ul>
                      <li>
                          <span>分类：</span>
                          <Select v-model="formValidate.type" style="width: 200px;">
                              <Option v-for="item in typeList" :value="item.id">{{item.type_name}}</Option>
                          </Select>
                      </li>
                      <li>
                          <span>系统标签：</span>
                          <Select v-model="formValidate.label" style="width: 200px;" filterable multiple>
                              <Option v-for="item in keyList" :value="item.id">{{item.value}}</Option>
                          </Select>
                      </li>
                      <li>
                          <span>上传图片：</span>

                          <div class="demo-upload-list" v-for="item in img.uploadList">
                              <template v-if="item.status === 'finished'">
                                  <img :src="item.url">
                                  <div class="demo-upload-list-cover">
                                      <Icon type="ios-eye-outline"></Icon>
                                      <Icon type="ios-trash-outline"></Icon>
                                  </div>
                              </template>
                              <template v-else>
                                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                              </template>
                          </div>
                          <Upload
                                  ref="upload"
                                  :show-upload-list="true"
                                  :on-success="handleSuccess"
                                  :format="['jpg','jpeg','png']"
                                  :max-size="2048"
                                  :on-format-error="handleFormatError"
                                  :on-exceeded-size="handleMaxSize"
                                  :before-upload="handleBeforeUpload"
                                  multiple
                                  type="drag"
                                  action="/api/add?action=uploadimage"
                                  style="display: inline-block;width:58px;">
                              <div style="width: 58px;height:58px;line-height: 58px;">
                                  <Icon size="20" type="ios-camera"></Icon>
                              </div>
                          </Upload>
                          <Modal title="View Image" v-model="img.visible">
                              <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="img.visible" style="width: 100%">
                          </Modal>
                      </li>
                      <li>
                          <span>排序：</span>
                          <Input type="text" v-model="formValidate.top"></Input>
                      </li>
                      <li>
                          <span>状态：</span>
                          <RadioGroup v-model="formValidate.status">
                              <Radio @on-change="statusClick(0)" label="发布" value="0"></Radio>
                              <Radio @on-change="statusClick(1)" label="草稿" value="1"></Radio>
                          </RadioGroup>
                      </li>
                  </ul>

              </div>
        </col>
        </Row>
    </div>
</template>
<script>

    import UE from '../../html/UE.vue';
    export default {
        components: { UE },
        data () {
            return {
                typeList:{},
                keyList:{},
                img:{
                    imgName: '',
                    visible: false,
                    uploadList: {}
                },
                config:{
                    initialFrameWidth: null,//设置为null即可
                    initialFrameHeight: 425,
                },
                formValidate: {
                    title: '',
                    abstrTitle: '',//简要标题
                    abstr: '',//概要
                    label:'',//标签
                    type:'',//类型
                    desc:'',//内容
                    status:'',//状态
                    imgSrc:'',//图片路径
                    top:''//排序
                },
                formLabelWidth : '140px',
                ruleValidate: {
                    title: [
                        { required: true, message: '文章标题不能为空', trigger: 'blur' }
                    ],
                    abstrTitle: [
                        { required: true, message: '简略标题不能为空', trigger: 'blur' }
                    ],

                }
            }
        },
        mounted:function(){
            this.getTypeList();
            this.getKey();
            this.img.uploadList = this.$refs.upload.fileList;


        },
        beforeRouteLeave(to, from, next){
            next();
        },
        methods: {
            openWindow: function(){
                this.addFormVisible = true;
            },
            //加载文章类型
            //获取文档内容
            getContent: function(){
                let content = this.$refs.ueditor.getUEContent();
                return content;
            },
            handleSubmit (name) {
                var target = this;
                this.$refs[name].validate((valid) => {
                    if (valid){
                        target.submitform(name);
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            submitform(name){
                var that = this;
                var content = that.getContent();
                var formValidate =that.formValidate;
                if(formValidate.status=='发布'){
                    formValidate.status=0;
                }else{
                    formValidate.status =1;
                }
                formValidate.desc  = content;
                this.fetch({
                    url:'/posts',
                    method:'POST',  //2数据提交
                    data:formValidate,
                }).then(function (response) {
                      if(response.data.ret==1){
                          that.$Message.success('添加文章成功！');
                          that.$refs[name].resetFields();
                          that.formValidate.label='';
                          that.$refs.ueditor.setUEcontent('');
                          this.img.uploadList={};
                      }
                });

            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.formValidate.type='';
                this.formValidate.status='';
                this.formValidate.label='';
                this.$refs.ueditor.setUEcontent('');
                this.img.uploadList={};
            },
            getTypeList(){
                var that = this;
                this.fetch({
                    url: '/gets?type=1', //1为获取type
                    method: 'GET',
                    params: {

                    }
                }).then(function (response) {
                    that.typeList = response.data.rows;
                });
            },
            getKey(){
                var that = this;
                this.fetch({
                    url: '/gets?type=2', //2为获取key
                    method: 'GET',
                    params: {

                    }
                }).then(function (response) {
                       that.keyList = response.data.rows;
                });
            },
            handleSuccess (res, file) {
               this.img.uploadList=file;
                this.formValidate.imgSrc=this.img.uploadList.response.url

            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {

            },
            handleRemove(item){

            },
        }
    }
</script>
<style>
    .edui-default{
        width: auto!important;
        z-index: 0!important;
    }
    .ivu-tag .ivu-icon-ios-close-empty{
        color:white;
    }
    form{
        padding: 20px 30px;
    }
    .ivu-col{
        padding: 10px 20px;
    }
    .tempAdd{
        background-color: #fff;
        -webkit-box-shadow: 1px 1px 9px #ccc;
        box-shadow: 1px 1px 9px #cccccc6b;
        border: 1px solid #cccccc73;
    }
    .tempAdd>ul>li{
        list-style: none;
        margin-bottom: 40px;
    }
    .tempAdd>ul{
        padding: 40px 20px;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>